<template>
  <view class="main">
    <view class="list">

      <view class="item" v-for="(item,i) in list" :key="i">
        <image class="cover" :src="item.cover"></image>
        <view class="content">
          <view class="name text-cut">{{ item.title }}</view>
          <view class="actions">
            <text class="icon cuIcon-write" @click="toInfo(item)"></text>
            <text class="icon cuIcon-delete" @click="remove(item)"></text>
          </view>
        </view>
      </view>

    </view>

    <list-loading v-if="loading"/>
    <list-empty v-if="!loading && (!list || list.length == 0)"/>
    <list-load-over v-else-if=" loadOver"/>

    <view class="float-button" @click="toInfo()">
      <text class="cuIcon-upload"></text>
    </view>


    <my-dialog content="你确定要删除吗？" icon="cuIcon-close" ref="dialog" show-cancel @confirm="handleRemove"/>

  </view>
</template>

<script>
import MyDialog from "@/components/dialog";
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";
import Api from "@/utils/Api";

export default {
  name: "technician-achievement-index",
  components: {MyDialog, ListLoadOver, ListEmpty, ListLoading},
  data() {
    return {
      list: [],
      page: 0,
      loading: false,
      loadOver: false,
      userId: null,

      editModel: null,
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.req.getUserInfoCheckMobile().then(res => {
      this.userId = res.id;

      this.clear();
      this.getList();

    })
  },
  methods: {
    toInfo(item) {
      let id = (item && item.id) ? item.id : '';
      uni.navigateTo({url: `/pages/index/my/technician/achievement/post/index?id=${id}`})
    },
    remove(item) {
      this.editModel = item;
      this.$refs.dialog.show();
    },
    handleRemove() {
      Api.removeTechnicianWork(this.editModel.id).then(res => {
        this.$toast("删除成功")
        this.refresh();
      })
    },
    refresh() {
      this.clear();
      this.getList();
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;
      Api.getTechnicianWorks(this.userId, ++this.page).then(res => {
        this.list.push(...res)
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    }
  },
  onPullDownRefresh() {
    this.clear();
    this.getList();
  },
  onReachBottom() {
    this.getList();
  },
}
</script>

<style scoped lang='scss'>
.main {
  overflow-x: hidden;
}

.list {
  $gap: r(40px);
  width: calc(100% + #{$gap});
  overflow-x: hidden;
  padding: r(40px) 0 calc(#{r(40px)} + env(safe-area-inset-bottom)) r(40px);
  display: flex;
  flex-wrap: wrap;

  .item {
    width: calc(50% - #{$gap });
    margin-right: $gap;
    margin-top: $gap;
    background-color: white;
    border-radius: r(10px);
    overflow: hidden;

    .cover {
      height: r(300px);
    }

    .content {
      padding: r(30px);
      display: flex;
      align-items: center;

      .name {
        flex: 1;
      }
    }

    .actions {

      .icon {
        margin-left: r(10px);
      }
    }

  }

}


.float-button {
  height: r(75px);
  width: r(75px);
  border-radius: 50%;
  background-color: $primary-color;
  justify-content: center;
  align-items: center;
  display: flex;
  color: white;
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + #{r(150px)});
  right: r(50px);
  box-shadow: r(2px 2px 19px 2px) rgba(191, 143, 58, 0.55);

}
</style>